<template>
	<div class="allDiv">
		<el-card class="box-card">
			<el-form ref="queryForm" :model="queryParams" label-width="100px">
				<el-row :gutter="24" style="margin-top: 20px">
					<el-col :span="4"
						><div class="grid-content bg-purple">
							<el-form-item label="手机号：" prop="title">
								<el-input v-model.trim="queryParams.phone" placeholder="请输入手机号"></el-input>
							</el-form-item></div
					></el-col>
					<el-col :span="5"
						><div class="grid-content bg-purple">
							<el-form-item label="发送时间：">
								<el-date-picker v-model.trim="queryParams.date" type="date" placeholder="选择日期"> </el-date-picker>
							</el-form-item></div
					></el-col>
					<el-col :span="4"
						><div class="grid-content bg-purple">
							<el-form-item>
								<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
								<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
							</el-form-item>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
		<el-card class="box-card">
			<div slot="header" class="headerDiv">
				<span>搜索表格</span>
				<el-button icon="el-icon-document-delete" type="primary" style="margin-left: 20px">Excel导出</el-button>
				<div class="cardSpan">
					<i class="el-icon-warning" style="color: #409eff"></i>
					<span>{{ '总共：' }}</span>
					<span>{{ '消耗：' }}</span>
					<span>{{ '剩余：' }}</span>
				</div>
				<div class="cardButton">
					<i class="el-icon-setting icon"></i>
				</div>
			</div>
			<el-table v-loading="loading" stripe :data="userList" @selection-change="handleSelectionChange">
				<el-table-column :formatter="emptyToString" type="selection" width="50" align="center" />
				<el-table-column v-if="columns[0].visible" key="objId" :formatter="emptyToString" label="编号" align="center" prop="objId" width="50" />
				<el-table-column v-if="columns[1].visible" key="sign" :formatter="emptyToString" label="短信签名" align="center" prop="sign" width="100" />
				<el-table-column v-if="columns[2].visible" key="phone" :formatter="emptyToString" label="手机号" align="center" prop="phone" width="120" />
				<el-table-column v-if="columns[3].visible" key="consumeNum" :formatter="emptyToString" label="消耗条数" align="center" prop="consumeNum" :show-overflow-tooltip="true"> </el-table-column>
				<el-table-column v-if="columns[4].visible" key="messageId" :formatter="emptyToString" label="消息ID" align="center" prop="messageId" width="200" />
				<el-table-column v-if="columns[5].visible" key="content" :formatter="emptyToString" label="短信内容" align="center" prop="content" width="800" />
				<el-table-column v-if="columns[6].visible" key="smsResult" :formatter="emptyToString" label="发送状态" align="center">
					<template slot-scope="scope">
						<div class="circle" :style="scope.row.smsResult ? 'background-color: #67C23A;' : 'background-color: #F56C6C;'"></div>
						<span>{{ scope.row.smsResult ? '成功' : '失败' }}</span>
					</template>
				</el-table-column>
				<el-table-column v-if="columns[7].visible" :formatter="emptyToString" label="发送时间" align="center" prop="createTime" width="160"> </el-table-column>
				<el-table-column v-if="columns[8].visible" :formatter="emptyToString" label="操作" align="center" width="100" class-name="small-padding fixed-width" fixed="right">
					<template slot-scope="scope">
						<el-button v-if="scope.row.userId !== 1" v-hasPermi="['system:user:remove']" size="mini" type="text" @click="handleDelete(scope.row)">详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getListData"
		/></el-card>
	</div>
</template>

<script>
import { listData } from '@/api/mall/notice';
export default {
	components: {},
	data() {
		return {
			// 遮罩层
			loading: false,
			//数据列表
			userList: null,
			// 搜索参数
			queryParams: {
				page: 1,
				limit: 10,
				userPhone: undefined,
				//date: undefined,
			},
			// 总条数
			total: 0,
			// 列信息
			columns: [
				{ key: 0, label: `编号`, visible: true },
				{ key: 1, label: `短信签名`, visible: true },
				{ key: 2, label: `手机号`, visible: true },
				{ key: 3, label: `消耗条数`, visible: true },
				{ key: 4, label: `消息ID`, visible: true },
				{ key: 5, label: `短信内容`, visible: true },
				{ key: 6, label: `发送状态`, visible: true },
				{ key: 7, label: `发送时间`, visible: true },
				{ key: 8, label: `操作`, visible: true },
			],
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
		};
	},
	created() {
		this.getListData();
	},
	mounted() {},

	methods: {
		//获取列表数据
		getListData() {
			listData(this.queryParams).then((response) => {
				this.userList = response.data;
				this.total = response.count;
				this.loading = false;
			});
		},
		/** 搜索按钮操作 */
		handleQuery() {
			//this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.queryParams.date = undefined;
			this.resetForm('queryForm');
			//this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map((item) => item.userId);
			this.single = selection.length != 1;
			this.multiple = !selection.length;
		},
	},
};
</script>

<style lang="scss" scoped>
.allDiv {
	width: 100%;
	.text {
		font-size: 14px;
	}
	.headerDiv {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.cardSpan {
			display: flex;
			flex: 1;
			border: 1px #409eff solid;
			background-color: rgb(217, 236, 255);
			height: 40px;
			border-radius: 5px;
			margin-right: 20px;
			margin-left: 20px;
			align-items: center;
			padding-left: 20px;
			span {
				margin-left: 20px;
			}
		}
		.cardButton {
			.icon {
				font-size: 20px;
			}
		}
	}

	.box-card {
		margin: 10px 10px;
		.circle {
			// 设置圆点的宽、高、背景颜色，再设置圆点半径所占百分比
			width: 10px;
			height: 10px;
			border-radius: 50%;
			// 设置圆点与其后面的内容水平显示
			display: inline-block;
			margin-right: 5px;
		}
	}
}
</style>
